<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { uniFetch } from '../../api/uni-fetch';
import { useUserStore } from "/store/user.js"

// 获取屏幕边界到安全区域距离
const {	safeAreaInsets} = uni.getSystemInfoSync()

// 页面参数
const props = defineProps({
	goodsId: [String, Number],
	num: [String, Number],
	groudId: [String, Number],
	group_price: [String, Number]
})

function goPage() {
	if (props.groudId) {
		uni.navigateTo({
			url: `/pages/ProductDetails/ProductDetails?goodsId=${props.goodsId}&groudId=${props?.groudId}&group_price=${props?.group_price}`
		})
	} else {
		uni.navigateTo({
			url: `/pages/ProductDetails/ProductDetails?goodsId=${props.goodsId}`
		})
	}
}

// 获取数据方法
const goodsDetail = ref({ detail_image: [''] })
const totalPrice = ref(0)
async function getDetail(id, num) {
	const res = await uniFetch.post('/product/detail', { app_id: uni.appId, id })
	goodsDetail.value = res.data

	if (props.groudId) {
		totalPrice.value = num * floatNum(props.group_price - 0)
	} else {
		if(store.memberInfo.is_member) {
			totalPrice.value = num * floatNum(goodsDetail.value.member_price)
		} else {
			totalPrice.value = num * floatNum(goodsDetail.value.price)
		}
	}
}


function floatNum(num) {
	let float = num.toFixed(2)
	float = float * 100
	float = float + ''
	console.log(float);
	console.log(typeof float);
	const inte = float.split('.')[0]
	return inte
}



// 选择地址
const selectedAddress = ref(null)

function chooseAddress() {
	console.log(orderstatus.value);
	if (orderstatus.value == 1 || orderstatus.value == 0) {
		return
	}
	// 隐私
	wx.getPrivacySetting({
		success: res => {
			console.log(res)
			if (res.needAuthorization) {
				// 需要弹出隐私协议
				console.log(res, '隐私');
			} else {
				// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
				console.log('隐私条款suc');
			}
		},
		fail: (err) => {
			console.log(err.msg, '隐私协议接口出错');
		},
	})

	uni.chooseAddress({
		success: (res) => {
			console.log(res);
			selectedAddress.value = res
		},
		fail(err) {
			console.log(err);
		}
	})
}

const payWay = ref('my')
const payTitle = ref('微信支付')

// function choosePay(way) {
// 	payWay.value = way
// 	if (way === 'wx') {
// 		payTitle.value = '微信支付'
// 	} else {
// 		payTitle.value = '余额支付'
// 	}
// }

// 购物车付款
async function payForCart() {
	ids.value = ids.value.slice(0, -1);
	console.log(ids, 'ids');
	const pres = await uniFetch.post('/shop-cart/pay-order', {
		cart_ids: ids.value,
		address: selectedAddress.value,
		app_id: uni.appId
	})
	console.log(pres, '购物车付款结果');
	if (pres.code === 10000) {
		if (pres.data?.pay_status && pres.data.pay_status == 1) {
				uni.showToast({
					title: "积分支付成功",
					success: () => {
						setTimeout(() => {
							uni.redirectTo({
								url: '/subpkg/PayResult/PayResult?payMoney=' + totalPrice.value / 100
							})
						}, 1500)
					}
				})
				return
		}
		// if (!pres.data) {
		// 	uni.showToast({
		// 		title: "余额支付成功",
		// 		success: () => {
		// 			setTimeout(() => {
		// 				uni.redirectTo({
		// 					url: '/subpkg/PayResult/PayResult?payMoney=' + totalPrice.value / 100
		// 				})
		// 			}, 1500)
		// 		}
		// 	})
		// 	return
		// }
		wx.requestPayment({
			timeStamp: String(pres.data.timestamp),
			nonceStr: pres.data.nonceStr,
			package: pres.data.package,
			"signType": "MD5",
			paySign: pres.data.paySign,

			success: (res) => {
				console.log(res, 'res');
				if (res.errMsg == 'requestPayment:ok') {
					uni.showToast({
						icon: 'none',
						title: '支付成功'
					})
					uni.navigateTo({
						url: '/subpkg/PayResult/PayResult?payMoney=' + totalPrice.value / 100
					})
				}
			},
			fail: (err) => {
				uni.showToast({
					icon: 'none',
					title: '取消支付'
				})
				console.log(err, 'err');
			}
		})
		return
	}
	uni.showToast({
		title: pres.msg,
		icon: 'none'
	})
}
// 支付订单
// const remark = ref('') // 订单备注
const store = useUserStore()
store.curretPage = ''
const onOrderSubmit = async () => {
	console.log(store.token,'store.token');
	if (orderstatus.value == 1) {
		return
	}
	if (!store.token) {
		if (props.groudId) {
			store.curretPage = `subpkg/CreatOrder/CreatOrder?num=${props.num}&goodsId=${props.goodsId}&groudId=${props.groudId}&group_price=${props.group_price}`
		} else {
			store.curretPage = `subpkg/CreatOrder/CreatOrder?num=${props.num}&goodsId=${props.goodsId}`
		}
 
		uni.switchTab({
			url: '/pages/mine/mine' 
		})
		setTimeout(() => {
			uni.showToast({
				icon: 'error',
				title: '请先登录',
				duration: 2000
			})
		}, 500)
		store.userInfo = ''
		store.token = ''
		store.memberInfo = ''
		return
	}

	// 同意规则 	// 没有收货地址提醒
	if (!isRule.value) {
		uni.showToast({
			title: '请勾选协议',
			icon: 'none'
		})
		isShark.value = true
		return setTimeout(() => {
			isShark.value = false
		}, 1000)
	}

	if (!selectedAddress.value) {
		return uni.showToast({
			icon: 'none',
			title: '请选择收货地址'
		})
	}

	// 支付未支付订单
	if (orderstatus.value == 0) {
		console.log('支付未支付订单');
		try {
			const payres = await uniFetch.post('/shop-order/pay', { app_id: uni.appId, id: payInfo.value.id })
			wx.requestPayment({
				timeStamp: String(payres.data.timestamp),
				nonceStr: payres.data.nonceStr,
				package: payres.data.package,
				"signType": "MD5",
				paySign: payres.data.paySign,
				success: (res) => {
					console.log(res, 'res');
					if (res.errMsg == 'requestPayment:ok') {
						uni.showToast({
							icon: 'none',
							title: '支付成功'
						})
						uni.navigateTo({
							url: '/subpkg/PayResult/PayResult?payMoney=' + totalPrice
								.value /
								100
						})
					}
				},
				fail: (err) => {
					uni.showToast({
						icon: 'none',
						title: '取消支付'
					})
					console.log(err, 'err');
				}
			})
		} catch (err) {
			console.log(err);
		}
		return
	}

	if (orderstatus.value == 2) {
		console.log('购物车下单');
		payForCart()
		return
	}

	let payres

	if (props.groudId) {
		try {
			payres = await uniFetch.post('/product-pay/pay-order-hl', {
				address: selectedAddress.value,
				app_id: uni.appId,
				group_id: props.groudId,
				num: props.num,
				id: props.goodsId
			})
			console.log(payres, 'payresult')
		} catch (e) {
			console.log(e, '/product-pay/pay-order==>错误');
		}
	} else {
		try {
			payres = await uniFetch.post('/product-pay/pay-cart-order', {
				address: selectedAddress.value,
				app_id: uni.appId,
				num: props.num,
				id: props.goodsId
			})
			console.log(payres, 'payresult')
		} catch (e) {
			console.log(e, '/product-pay/pay-order==>错误');
		}
	}

	if (payres.code !== 10000) {
		uni.showToast({
			icon: 'none',
			title: payres.msg
		})
		return
	}

	if (payres.data?.pay_status && payres.data.pay_status == 1) {
			uni.showToast({
				title: "积分支付成功",
				success: () => {
					setTimeout(() => {
						uni.redirectTo({
							url: '/subpkg/PayResult/PayResult?payMoney=' + totalPrice.value / 100
						})
					}, 1500)
				}
			})
			return
	}

	// if (!payres.data) {
	// 	uni.showToast({
	// 		title: "余额支付成功",
	// 		success: () => {
	// 			setTimeout(() => {
	// 				uni.redirectTo({
	// 					url: '/subpkg/PayResult/PayResult?payMoney=' + totalPrice.value / 100
	// 				})
	// 			}, 1500)
	// 		}
	// 	})
	// 	return
	// }
	console.log(payres.data, '111');
	console.log(payres.data.timestamp, '222');
	console.log(String(payres.data.timestamp), '333');
	
	wx.requestPayment({
		timeStamp: String(payres.data.timestamp),
		nonceStr: payres.data.nonceStr,
		package: payres.data.package,
		"signType": "MD5",
		paySign: payres.data.paySign,

		success: (res) => {
			console.log(res, 'res');
			if (res.errMsg == 'requestPayment:ok') {
				uni.showToast({
					icon: 'none',
					title: '支付成功'
				})
				uni.redirectTo({
					url: '/subpkg/PayResult/PayResult?payMoney=' + totalPrice.value / 100
				})
			}
		},
		fail: (err) => {
			uni.showToast({
				icon: 'none',
				title: '取消支付'
			})
			console.log(err, 'err');
		}
	})
}

// 阅读收货规则
const isRule = ref(false)
const ruleShow = ref(false)
const isShark = ref(false)

// 初始化调用 // 获取订单信息
const orderPre = ref({})
const orderstatus = ref(null)

// 剩余时间
const buyedGoods = ref([])
const remainingTime = ref(0)
const payInfo = ref(null)
async function getOrderInfo(id) {
	const res = await uniFetch.post('/shop-order/detail', {
		app_id: uni.appId,
		id
	})
	isRule.value = true
	console.log(res, '创建的订单信息');
	payInfo.value = res.data
	console.log(payInfo.value, 'payInfo.value');

	totalPrice.value = res.data.total_amount * 100

	const now = new Date();
	const createTime = new Date(res.data.create_time);
	console.log(createTime, createTime.getTime(), 'createTime');

	// 将当前时间加上半个小时
	const newTime = new Date(createTime.getTime() + 30 * 60 * 1000);
	console.log(newTime, newTime.getTime(), 'newTime');
	remainingTime.value = Math.floor((newTime.getTime() - now.getTime()) / 1000)
	countdown.value = true
	console.log(remainingTime.value, 'remainingTime.value');

	// 地址回显 
	selectedAddress.value = {
		userName: res.data.receiver,
		telNumber: res.data.phone,
		provinceName: res.data.province,
		countyName: res.data.city,
		detailInfo: res.data.address
	}
	// 商品回显
	buyedGoods.value = res.data.product_detail
}
const countdown = ref(false)
const ids = ref('')
onLoad((option) => {
	console.log(option, 33);
	if (option.created) {
		orderstatus.value = 0
		getOrderInfo(option.id)
		props.goodsId = option.id
	} else if (option.arr) {
		orderstatus.value = 2

		console.log(option.arr, 'arr');
		const goodsArr = JSON.parse(option.arr)
		goodsArr.forEach(async item => {
			const { data } = await uniFetch.post('/product/detail', {
				app_id: uni.appId,
				id: item.goodsId
			})
			console.log(data, 'arrINFO');
			ids.value += item.ids + ','
			buyedGoods.value.push({ count: item.count, product_id: data.product_detail.id, image: data.detail_image[0], product_name: data.title, unit_price: data.member_price })
			totalPrice.value += item.count * floatNum(data.member_price)
		})
	} else {
		console.log(props.id, 'prop.id');
		getDetail(props.goodsId, props.num)
	}
})

function onTimeup() {
	orderstatus.value = 1
	payTitle.value = '订单超时'
	// selectedAddress.value = null

}

const customStyle = {
	width: `90%`,
}

function agreeRule() {
	ruleShow.value = false
	isRule.value = true
}

function showPopup() {
	ruleShow.value = true
}

function closePop() {
	isRule.value = true
	ruleShow.value = false
}

function changeRules() {
	isRule.value = !isRule.value
	console.log(isRule.value);
}
</script>

<template>
	<view class="viewport" :style="{ paddingBottom: safeAreaInsets?.bottom + 100 + 'px' }">
		<!-- 等待支付 -->
		<view v-if="orderstatus === 0" class="pay-time">
			<view class="status">等待支付</view>
			<view class="tips" v-if="orderstatus == 0">
				<text class="money">应付金额: ¥ {{ payInfo?.total_amount }}</text>
				<uni-countdown v-if="countdown" :font-size="30" :second="remainingTime" color="#fff" splitor-color="#fff"
					:show-day="false" :show-colon="false" @timeup="onTimeup" start />
			</view>
		</view>
		<view v-if="orderstatus === 1" class="pay-time">
			<view class="status">订单已过期</view>
			<view class="tips">
				<text class="money">应付金额: ¥ {{ payInfo?.total_amount }}</text>
				<uni-countdown :font-size="30" :second="0" color="#fff" splitor-color="#fff" :show-day="false"
					:show-colon="false" />
			</view>
		</view>

		<view v-if="selectedAddress" class="shipment" hover-class="shipment-click" @click="chooseAddress">
			<view class="user"> {{ selectedAddress.userName }} {{ selectedAddress.telNumber }} </view>
			<view class="address">
				{{ selectedAddress.provinceName }}
				{{ selectedAddress.cityName }}{{ selectedAddress.countyName }}{{ selectedAddress.detailInfo }}
			</view>
			<uni-icons class="icon" type="right"></uni-icons>
		</view>
		<view v-else class="shipment" hover-class="shipment-click" @click="chooseAddress">
			<view class="address"> 请选择收货地址 </view>
			<uni-icons class="icon" type="right"></uni-icons>
		</view>

		<!-- 商品信息 -->
		<view class="goods" v-if="props.goodsId">
			<view @click="goPage" class="item" hover-class="none">
				<image class="picture" :src="goodsDetail?.detail_image[0]" />
				<view class="meta">
					<view class="name ellipsis"> {{ goodsDetail.title }} </view>
					<view class="attrs"> {{ goodsDetail.sub_title }} </view>
					<view class="prices">
						<view v-if="props.groudId">
							<text class="symbol pay-price">{{ (props.group_price - 0).toFixed(2) }}</text>
						</view>
						<view v-else>
							<view class="pay-price symbol" v-if="store.memberInfo.is_member">{{ goodsDetail?.member_price?.toFixed(2) }}</view>
							<view class="pay-price symbol" v-else>{{ goodsDetail?.price?.toFixed(2) }}</view>
						</view>
						<view class="price symbol">{{ goodsDetail.old_price?.toFixed(2) }}</view>
					</view>
					<view class="count">x {{ props.num }}</view>
				</view>
			</view>
		</view>

		<view class="goods" v-else>
			<navigator v-for="item in buyedGoods" :key="item.id"
				:url="`/pages/ProductDetails/ProductDetails?goodsId=${item.product_id}`" class="item" hover-class="none">
				<image class="picture" :src="item?.image" />
				<view class="meta">
					<view class="name ellipsis"> {{ item.product_name }} </view>
					<!-- <view class="attrs"> {{item.product_name}} </view> -->
					<view class="prices">
						<view class="pay-price symbol">{{ item.unit_price?.toFixed(2) }}</view>
						<!-- <view class="price symbol">{{goodsDetail.old_price?.toFixed(2)}}</view> -->
					</view>
					<view class="count">x {{ item.count }}</view>
				</view>
			</navigator>
		</view>


		<!-- 配送及支付方式 -->
		<!-- 	<view class="related">

			<view class="item">
				<text class="text">订单备注</text>
				<input class="input" :cursor-spacing="30" placeholder="建议留言前先与商家沟通确认" v-model="remark" />
			</view>
		</view> -->

		<!-- 支付金额 -->
		<view class="settlement">
			<view class="item">
				<text class="text">商品总价: </text>
				<text class="number symbol">{{ totalPrice / 100 }}</text>
			</view>
			<view class="item">
				<text class="text">运费: </text>
				<text v-if="!selectedAddress" @click="chooseAddress">
					请先选择地址
					<uni-icons class="icon" type="right"></uni-icons>
				</text>
				<text v-else class="number"> 免运费 </text>
			</view>
		</view>

		<view class="detail" v-if="orderstatus == 0">
			<view class="title">订单信息</view>
			<view class="row">
				<view class="item">
					订单编号: {{ payInfo?.order_no }} <text class="copy" @tap="onCopy(payInfo.order_no)">复制</text>
				</view>
				<view class="item">创建时间: {{ payInfo?.create_time }}</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<!-- <view class="pay-way" v-if="!payInfo">
			<view class="way-item" @click="choosePay('my')">
				<view class="icon">
					<image src="../../static/images/paymy.png" mode="widthFix"></image>
				</view>
				<view class="name">
					余额支付
					<view class="now">
						当前余额: ¥ 66.66
					</view>
				</view>

				<view class="checked" v-if="payWay === 'my'">
					<uni-icons size="35" color="#54007b" type="checkmarkempty"></uni-icons>
				</view>
			</view>
			<view class="way-item" @click="choosePay('wx')">
				<view class="icon" style="background-color: #47b338;">
					<image src="../../static/images/paywx.png" mode="widthFix"></image>
				</view>
				<view class="name">
					微信支付
					<view class="now">
						使用微信支付
					</view>
				</view>

				<view class="checked" v-if="payWay === 'wx'">
					<uni-icons size="35" color="#54007b" type="checkmarkempty"></uni-icons>
				</view>
			</view>
		</view> -->

		<radio-group class="radio-rule" @click="changeRules" :class="{ 'animate': isShark }">
			<label>
				<radio style="transform:scale(0.7)" :checked="isRule" color="#54007b"></radio>
				<text>请阅读并知晓 <text class="rules" @click.stop="showPopup">《售货规则》</text></text>
			</label>
		</radio-group>

		<u-popup :round="15" :safeAreaInsetBottom="false" :customStyle="customStyle" :show="ruleShow" mode="center"
			@close="closePop" @open="open" :closeable="true">
			<view class="popup-box">
				<view class="title">售后规则</view>
				<view style="line-height: 1.5;">
					拿货商城售后规则:
				</view>
				<view class="item">
					1、【收货】请在送货员送达时当面开箱验货检查，包括外包装箱及箱内产品是否完整并无破损，确认无误再签收;
				</view>
				<view class="item">
					2、【签收】如有破损情况请不要签收，第1时间拍照片或小视频保留记录，同时联系商城客服或交易员;
				</view>
				<view class="item">
					3、【留底】为了更高效处理售后问题，产品外包装箱请完整保留15天以上，如出现问题请配合客服提供售后单据;
				</view>
				<view class="item">
					4、【特别提醒】签收之后再拆箱，再发现商品运输破损问题需要自行处理。为不造成您的损失，请一定开箱验货后再签收;
				</view>
				<view class="item">
					5、【拒收】个人原因无故拒签，需买家自行承担拒签费用,包含运费以及可能产生的二次包装费等;
				</view>
				<view class="item">
					6、【取消订单】因个人原因取消订单，需自行承担退款手续费。如产品已发出，无质量问题不支持无理由退款;
				</view>
				<view class="item">
					7、【退款手续费】1万元以下(含1万元)每笔收费5元:1万-50万元(含50万元),每笔收费15元;50万-100万元(含100万元)每笔收费20元;100万元以上,每笔按汇款金额的0.002%收取,最高不超过200元;
				</view>
				<view class="item">
					8、【退款申请】如需申请退款,须联系人工客服或交易员。退款申请成功后订,单状态显示为同意退款,即1-3个工作日可完成。
				</view>

			</view>

			<button @click="agreeRule">同意</button>
		</u-popup>

	</view>
	<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>

	<!-- 吸底工具栏 -->
	<view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
		<view class="total-pay symbol">
			<text class="number">{{ totalPrice / 100 }}</text>
		</view>
		<view class="button" :class="{ disabled: !selectedAddress || orderstatus == 1 }" @click="onOrderSubmit">
			{{ payTitle }}
		</view>

	</view>
</template>

<style lang="scss" scoped>
.viewport {
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #f5f5f5;
}

.pay-time {
	height: 350rpx;
	background-color: $custom-theme-color;
	color: #f1f1f1;

	.status {
		padding-top: 100rpx;
		font-size: 38rpx;
		text-align: center;
	}

	.tips {
		margin: 30rpx 0;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.money {
			// margin-right: 30rpx;
			margin-bottom: 30rpx;
		}

	}

}

.symbol::before {
	content: '¥';
	font-size: 80%;
	margin-right: 5rpx;
}

.shipment {
	position: relative;
	margin: 20rpx;
	padding: 70rpx 30rpx 70rpx 84rpx;
	font-size: 32rpx;
	border-radius: 10rpx;
	border: 1rpx solid #fdfdfd;
	background-color: #fff;

	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 10rpx;
		transform: translateY(-50%);
		background: #f5e1ff url(../../static/images/loation.png) no-repeat center;
		background-size: 60%;
		// background-color:;
		height: 64rpx;
		width: 64rpx;
		border-radius: 37rpx;
	}

	.icon {
		font-size: 36rpx;
		color: #333;
		transform: translateY(-50%);
		position: absolute;
		top: 50%;
		right: 20rpx;
	}

	.user {
		color: #333;
		margin-bottom: 5rpx;
	}

	.address {
		color: #666;
	}
}

.shipment-click {
	background-color: #f1f1f1;
}

.goods {
	margin: 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.item {
		display: flex;
		padding: 30rpx 0;
		border-top: 1rpx solid #eee;

		&:first-child {
			border-top: none;
		}

		.picture {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.meta {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
		}

		.name {
			height: 80rpx;
			font-size: 26rpx;
			color: #444;
		}

		.attrs {
			line-height: 1.8;
			padding: 0 15rpx;
			margin-top: 6rpx;
			font-size: 24rpx;
			align-self: flex-start;
			border-radius: 4rpx;
			color: #888;
			max-width: 400rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			background-color: #f7f7f8;
		}

		.prices {
			display: flex;
			align-items: baseline;
			margin-top: 6rpx;
			font-size: 28rpx;

			.pay-price {
				margin-right: 10rpx;
				color: #cf4444;
			}

			.price {
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
			}
		}

		.count {
			position: absolute;
			bottom: 0;
			right: 0;
			font-size: 26rpx;
			color: #444;
		}
	}
}

.related {
	margin: 20rpx 20rpx 0;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 80rpx;
		font-size: 26rpx;
		color: #333;
	}

	.input {
		flex: 1;
		text-align: right;
		margin: 20rpx 0;
		padding-right: 20rpx;
		font-size: 26rpx;
		color: #999;
	}

	.item .text {
		width: 125rpx;
	}

	.picker {
		color: #666;
	}

	.picker::after {
		content: '\e6c2';
	}
}

/* 结算清单 */
.settlement {
	margin: 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		font-size: 26rpx;
		color: #333;
		border-bottom: 1px solid #f2f2f2;
	}

	.danger {
		color: #cf4444;
	}
}


// 支付方式
.pay-way {
	margin: 40rpx 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.way-item {
		height: 120rpx;
		border-bottom: 1px solid #f2f2f2;


		.icon {
			margin-top: 25rpx;
			float: left;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 70rpx;
			height: 70rpx;
			background-color: #fec849;
			border-radius: 10rpx;

			image {
				width: 46rpx;
				height: 46rpx;
			}
		}

		.name {
			float: left;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20rpx;
			height: 120rpx;
			font-size: 35rpx;
			line-height: 45rpx;

			.now {
				color: #555;
				font-size: 23rpx;
			}
		}

		.checked {
			height: 120rpx;
			display: flex;
			align-items: center;
			float: right;
		}
	}
}


.radio-rule {
	margin: 10rpx 20rpx;
	font-size: 26rpx;
	width: fit-content;

	.rules {
		color: #42a5f5;
	}
}

.animate {
	animation: rubberBand ease-in .3s 4;
}

@keyframes rubberBand {
	0% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(-10px);
	}

	40% {
		transform: translateX(10px);
	}

	60% {
		transform: translateX(-10px);
	}

	80% {
		transform: translateX(10px);
	}

	100% {
		transform: translateX(0);
	}
}

.popup-box {
	padding: 0 10rpx;

	.title {
		line-height: 53rpx;
		font-size: 30rpx;
		text-align: center;
		border-bottom: 1px solid #fefefe;
	}

	.item {
		font-size: 23rpx;
	}
}

button {
	width: 250rpx;
	height: 65rpx;
	line-height: 65rpx;
	margin-top: 45rpx;
	margin-bottom: 25rpx;
	color: #fefefe;
	background: generate-gradient($custom-theme-color, $custom-theme-color-2);
}

.detail {
	line-height: 1;
	padding: 30rpx 20rpx 0;
	margin: 20rpx 20rpx 0;
	font-size: 26rpx;
	color: #666;
	border-radius: 10rpx;
	background-color: #fff;

	.title {
		font-size: 30rpx;
		color: #444;
	}

	.row {
		padding: 20rpx 0;

		.item {
			padding: 10rpx 0;
			display: flex;
			align-items: center;
		}

		.copy {
			border-radius: 20rpx;
			font-size: 20rpx;
			border: 1px solid #ccc;
			padding: 5rpx 10rpx;
			margin-left: 10rpx;
		}
	}
}

/* 吸底工具栏 */
.toolbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--window-bottom));
	z-index: 1;

	background-color: #fff;
	height: 100rpx;
	padding: 0 20rpx;
	border-top: 1rpx solid #eaeaea;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: content-box;

	.total-pay {
		font-size: 40rpx;
		color: #cf4444;

		.decimal {
			font-size: 75%;
		}
	}

	.button {
		width: 220rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 72rpx;
		background: generate-gradient($custom-theme-color, $custom-theme-color-l)
	}

	.disabled {
		opacity: 0.6;
	}
}
</style>